
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研学请假系统</title>
    <link rel="stylesheet" href="infor.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #whole_wrapper{
        width: 1920px;
        height: 1080px;
        margin: auto;
        background: url(./img/bgd1.png);
    }
    .top{
        width:1920px;
        height:40px;
        font-size: 16px;
        color:white;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        letter-spacing: 0.2em;
        backdrop-filter: blur(1px);
        background-color: rgba(213, 153, 99, 0.53);
    }
    .welcome{
        margin-left: 360px;
    }
    .user{
        margin-right: 360px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #avatar{
        width:30px;
        height: 30px;
        border-radius: 50%;
        position: relative;
    }
    #avatar img{
        width:30px;
        height: 30px;
        border-radius: 50%;
    }
    #user_name{
        width:150px;
        height: 24px;
        background-color: rgba(201, 147, 93, 0.9);
        margin-left: 15px;
        color:white;
        text-align: center;
        line-height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #user_event{
        width: 44px;
        height: 20px;
        color: #000000;
        position: absolute;
        right: -7px;
        top: 35px;
        cursor: default;
        display: none;
        background-color: #D9D9D9;
        font-size: 16px;
        text-align: center;
        line-height: 20px;
    }
    .main{
        margin:0 auto;
        width: 1920px;
        height:1040px;
        display: flex;
        justify-content: flex-start;
    }
    #director{
        width:510px;
        height:1040px;
        color:#ffffff;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        background-color: rgba(53, 152, 253, 0.83);
    }
    .logo{
        width:120px;
        height:120px;
        font-size: 14px;
        text-align: center;
        line-height: 60px;
    }
    .logo img{
        width: 100px;
        height: 120px;
    }
    .director_item{
        margin:20px 0 90px;
        width:150px;
        height:60px;
        line-height: 60px;
        text-align: center;
        letter-spacing: 3px;
        cursor: pointer;
    }
    .director_item:hover{
        background-color: #e9e9e9!important;
    }
    .banner_item{
        width: 100%;
        height: inherit;
        display: none;
        position: relative;
        color: white;
    }
    .words{
        position: absolute;
        left:20px;
        top:0;
    }
    .wrapper{
        /* display: none; */
        width:932px;
        height:920px;
        transition: all 0.5s;
        opacity: 0;
    }
</style>
<body>
    <div id="whole_wrapper">
        <div class="top">
            <div class="welcome">欢迎使用本请假系统！</div>
            <div class="user">
                <div id="avatar">
                    <img src="./img/avatar.png">
                    <div id="user_event">注销</div>
                </div>
                <div id="user_name"></div>
            </div>
        </div>
        <div class="main">
            <div id="director">
                <div class="logo">
                    <img src="./img/yundinglogo.png">
                </div>
                <div class="director_item">首页</div>
                <div class="director_item">请假</div>
                <div class="director_item">调研学</div>
                <div class="director_item">个人信息</div>
                <div class="director_item">关于我们</div>
            </div>
            <div class="banner">
                <div class="banner_item">
                    <div class="words">
                        <img src="./img/words.png">
                    </div>
                </div>
                
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="wrapper"></div>
                </div>

                <div class="banner_item">
                    <div class="wrapper">
                        <div class="banner">
                            <div class="banner_left"> 
                                <div class="banner_left_center">
                                    <p>云顶展</p>                    
                                    <div class="banner_left_center2">云顶介绍</div>
                                    <div class="banner_left_center3">云顶项目</div>
                                    <div class="banner_left_center4">云顶资源</div>                
                                </div>
                                <div class="banner_left_bottom">
                                    <div class="banner_left_bottom1">
                                        <div class="banner_left_bottom1_1">
                                            <div class="icon1"></div>
                                            <div class="tele">联系电话 ***********</div>
                                        </div>
                                        <div class="banner_left_bottom1_2">云顶书院官网</div>
                                        <div class="banner_left_bottom1_3">营业执照</div>
                                        <div class="banner_left_bottom1_4">商务合作</div>
                                        <div class="banner_left_bottom1_5">友情链接</div>
                                        <div class="banner_left_bottom1_6">意见反馈</div>
                                    </div>
                                    <div class="banner_left_bottom2">
                                        <div class="banner_left_bottom2_1">
                                            <div class="icon2"></div>                                                   
                                            <div class="tele">官方邮箱 ***********</div> 
                                         </div>                         
                                            <div class="banner_left_bottom2_2">代码托管平台官网</div>
                                        <div class="banner_left_bottom2_3">加入我们</div>
                                        <div class="banner_left_bottom2_4">用户协议</div>
                                        <div class="banner_left_bottom2_5">版权声明</div>
                                        <div class="banner_left_bottom2_6">投诉举报</div>                        
                                    </div>
                                </div>
                            </div>
                            <div class="banner_right">
                                <div class="banner_right_center1">极<br>目<br>星<br>辰<br>大<br>海<br>，</div>
                                <div class="banner_right_center2">振<br>翅<br>云<br>顶<br>之<br>上<br>。</div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
    <script>
        {
            var director_item=document.getElementsByClassName('director_item');
            var temp=0;
            var cn=true;
            var wrapper=document.getElementsByClassName('wrapper');
            var banner_item=document.getElementsByClassName('banner_item');
            var avatar=document.getElementById('avatar');
            var user_event=document.getElementById('user_event');
            var whole_wrapper=document.getElementById('whole_wrapper');
        }
        //初始化
        director_item[temp].style.backgroundColor='#2F4399';
        banner_item[temp].style.display='block';
        document.getElementById("director").addEventListener("click",(event)=>{
            if([...director_item].includes(event.target)){
                director_item[temp].style.backgroundColor='transparent';
                banner_item[temp].style.display='none';
                if(temp!==0){
                    wrapper[temp-1].style.opacity=0;
                }
                event.target.style.backgroundColor='#2F4399';
                temp=[...director_item].indexOf(event.target);
                banner_item[temp].style.display='block';
                switch(temp){
                    case 0:
                        whole_wrapper.style.background='url(./img/bgd1.png)';
                        break;
                    case 1:
                        whole_wrapper.style.background='url(./img/bgd2.png)';
                        break;
                    case 2:
                        whole_wrapper.style.background='url(./img/bgd3.png)';
                        break;
                    case 3:
                        whole_wrapper.style.background='url(./img/bgd4.png)';
                        break;
                    case 4:
                        whole_wrapper.style.background='url(./img/bgd1.png)';
                        break;
                }
                if(temp!==0){
                    setTimeout(()=>{wrapper[temp-1].style.opacity=1;},100);
                }
            }
        });
    </script>
    <script>
        avatar.onclick=function(){
            if(cn){
                user_event.style.display='block';
                cn=false;
            }else{
                user_event.style.display='none';
                cn=true;
            }
        };
    </script>
</body>
</html>